<template>
  <div>
    <div class="box">
      <!-- 头部form表单 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline form_top"
      >
        <el-form-item label="策略搜索:" extra style=" font-size:16px ; font-weight: 400;">
          <el-input v-model="formInline.policyName" placeholder="请输入" @change="search" />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="formbutton"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <!-- form表单下按钮 -->
      <div class="button_top">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="formbutton buttonbodytop"
          @click="onSubmit('add')"
        >新建</el-button>

        <!-- table表格 -->
        <el-table
          :row-style="{height:'11px'}"
          :data="tableData"
          size="mini"
          style="width: 100%"
          class="table_top"
          :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
        >
          <el-table-column prop="policyId" label="序号" width="50px" />
          <el-table-column prop="policyName" label="策略名称" align="center" />
          <el-table-column prop="discount" label="策略方案" align="center" width="1050px" />
          <el-table-column prop="createTime" label="创建日期" align="center" />

          <el-table-column prop="address" label="操作" align="center">
            <template #default="{row}">
              <el-button
                type="text"
                class="button_table_foot"
                @click="vmList(row)"
              >查看详情</el-button>
              <el-button
                type="text"
                class="button_table_foot"
                @click="onSubmit('eid',row)"
              >修改</el-button>
              <el-button
                type="text"
                class="button_table_foot"
                style="color:red"
                offset="3550"
                @click="delList(row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div v-if="totalCount>10" class="foot">
          <p>共{{ totalCount }}条记录 第 {{ queryObj.pageIndex }}/{{ totalPage }} 页</p>
          <div class="foot_button">
            <el-button
              ref="btno"
              type="primary"
              plain
              class="foot_button_top"
              @click="change1"
            >上一页</el-button>
            <el-button
              ref="btnb"
              type="success"
              plain
              class="foot_button_foot"

              @click="change"
            >下一页</el-button>
          </div>
        </div>
        <!-- 分页结束 -->

        <!-- 弹窗 -->
        <div>
          <el-dialog

            :title="title"
            class="el-dialog__title"
            :visible.sync="centerDialogVisible"
            width="30%"
            center
          >
            <el-form ref="dialog" label-width="70px">
              <el-form-item label="活动名称">

                <el-input
                  v-model="policyName"
                  placeholder="请输入内容"
                  maxlength="15"
                  show-word-limit
                />
              </el-form-item>
              <el-form-item label-width="70px" label="策略方案">
                <template>
                  <el-input-number v-model="discount" controls-position="right" :min="0" :max="10" placeholder="请输入" size="small" class="num" @change="handleChange" />
                </template>
              </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button class="btn2" @click="centerDialogVisible = false">取 消</el-button>
              <el-button class="btnn" @click="addSubmit">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <!-- 弹窗 -->
        <!-- 查看详情弹窗 -->
        <div>
          <el-dialog title="策略详情" :visible.sync="dialogTableVisible" width="30%">

            <el-form>
              <el-form-item label="策略方案" label-width="90px">
                <div>{{ rowName }}</div>
              </el-form-item>
              <el-form-item label="策略方案" label-width="90px">
                <el-table
                  :data="gridData"
                  size="mini"
                  stripe
                  :fit="false"
                  style="width: 400px"
                  :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
                >
                  <el-table-column property="i" label="序号" width="100" />
                  <el-table-column property="nodeName" label="点位名称" width="200" />
                  <el-table-column property="innerCode" label="设备编号" />
                </el-table>
                <div v-if=" cInfo.totalCount>10" class="dis">
                  <p>共{{ cInfo.totalCount }}条记录 第 {{ cInfo.pageIndex }}/{{ cInfo.totalPage }} 页</p>
                  <div class="btnn1">
                    <el-button
                      type="primary"
                      size="mini"
                      plain
                      @click="cchange1"
                    >上一页</el-button>
                    <el-button
                      type="success"
                      size="mini"
                      plain
                      @click="cchange"
                    >下一页</el-button>
                  </div>
                </div></el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogTableVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
            </div>
          </el-dialog>
        </div>
        <!-- 查看详情弹窗 -->
      </div>
    </div>
  </div>
</template>

<script>
import { list, addList, delList, editList, searchList, vmList } from '@/api/tactics'
export default {
  name: 'Tektor',
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      rowName: null,
      gridData: {},
      dialogTableVisible: false,
      title: 'add',
      flag: true,
      totalPage: null,
      totalCount: null,
      discount: null,
      policyId: null,
      policyName: null,
      centerDialogVisible: false,
      list: {},
      queryObj: {
        pageSize: 10,
        pageIndex: 1
      },
      cInfo: {
        totalPage: 0,
        totalCount: 0,
        pageIndex: 0
      },
      formInline: {
        policyName: null

      },
      tableData: [

      ]

    }
  },
  created() {
    this.getTactics()
  },
  methods: {
    // 查看详情请求
    async vm() {
      const data = await vmList({ ...this.cInfo, policyId: this.policyId })
      this.gridData = data.currentPageRecords
      let i = 0
      this.gridData = this.gridData.map(item => {
        i++
        item = { ...item, i }
        console.log(item)
        return item
      })
    },
    // 查看详情
    async  vmList(row) {
      console.log(row)
      this.rowName = row.policyName
      this.policyId = row.policyId
      const data = await vmList({ ...this.queryObj, policyId: this.policyId })
      console.log(data)
      this.cInfo.totalCount = +data.totalCount
      this.cInfo.totalPage = +data.totalPage
      this.cInfo.pageIndex = +data.pageIndex
      console.log(data.currentPageRecords)
      this.gridData = data.currentPageRecords
      let i = 0
      this.gridData = this.gridData.map(item => {
        i++
        item = { ...item, i }
        console.log(item)
        return item
      })
      console.log(this.gridData)
      this.dialogTableVisible = true
    },
    // 搜索
    async  search() {
      const data = await searchList({ policyName: this.formInline.policyName, pageIndex: this.queryObj.pageIndex, pageSize: this.queryObj.pageSize })
      console.log(data)
      this.tableData = data.currentPageRecords
    },
    // 删除
    async delList(row) {
      await delList(row.policyId)
      this.$message.success('删除成功')
      this.getTactics()
    },
    // 添加
    async  addSubmit() {
      if (this.title === '新增策略') {
        await addList({ policyName: this.policyName, discount: this.discount * 10 })
        this.getTactics()
        this.$refs.dialog.resetFields()
        this.policyName = null
        this.discount = null
        this.centerDialogVisible = false
        console.log(1)
      } else if (this.title === '修改策略') {
        console.log(2)
        await editList({ policyName: this.policyName, discount: this.discount * 10, policyId: this.policyId })
        this.centerDialogVisible = false

        this.policyName = null
        this.discount = null
        this.policyId = null
        this.getTactics()
      }
    },
    async onSubmit(type, id) {
      if (type === 'add') {
        this.title = '新增策略'
        this.centerDialogVisible = true
      } else if (type === 'eid') {
        this.title = '修改策略'
        this.policyName = id.policyName
        this.discount = id.discount
        this.policyId = id.policyId
        console.log(id)
        this.centerDialogVisible = true
      }
    },
    async getTactics() {
      const data = await list(this.queryObj)
      console.log(data)
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
      this.tableData = data.currentPageRecords
    },
    handleChange(value) {
      console.log(value)
    },
    async change() {
      if (this.queryObj.pageIndex < this.totalPage) {
        this.$refs.btnb.disabled = false

        this.flag = true

        this.queryObj.pageIndex += 1

        this.getTactics()
      } else {
        this.$refs.btnb.disabled = true

        this.flag = false
      }
    },
    change1() {
      if (this.queryObj.pageIndex > 1) {
        this.flag = true

        this.$refs.btno.disabled = false

        this.queryObj.pageIndex -= 1
        this.getTactics()
      } else {
        this.$refs.btno.disabled = true
      }
    },

    cchange1() {
      if (this.cInfo.pageIndex > 1) {
        this.flag = true
        this.$refs.btnb.disabled = false
        console.log(1)
        this.cInfo.pageIndex -= 1
        this.vm()
      } else {
        this.flag = false
        this.$refs.btnb.disabled = true
      }
    },
    async cchange() {
      if (this.cInfo.pageIndex < this.cInfo.totalPage) {
        this.flag = true

        this.cInfo.pageIndex += 1
        this.vm()
      } else {
        this.flag = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  .dis{
margin-top: 15px;
color: #bab2ae;
    display: flex;
    height: 30px;
    justify-content: space-around;
    align-items: center;
 .btnn1{

  }
  }

  .btn2{
background-color: #fbf4f0;
color: #bab2ae;
  }
  .btnn{
background-color:#ff6e2a;
color: #fff;
  }
  .num{
    width: 450px;
  }
  .el-dialog__title{
    font-weight: 700;
    color: #5f84ff;
  }
  margin: 10px 15px 0 15px;
  .demo-form-inline.form_top {
    height: 60px;
    background-color: #fff;
    padding-top: 11px;
    padding-left: 20px;
    .formbutton {
      background-color: #5f84ff;
    }
  }
  .button_top {
    margin-top: 15px;
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;
    margin-bottom: 15px;
    .buttonbodytop {
      border: 0px;
      background-color: #ff883a;
    }
    .buttonbodyfoot {
      border: 0px;
      background-color: #fbf4f0;
      color: #655b56;
    }
    .table_top {
      margin-top: 15px;
      .button_table_foot {
        color: #5f84ff;
      }
    }
    .foot {
      display: flex;
      justify-content: space-between;

      margin-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 30px;
      p {
        color: #dbdfe5;
      }
      .foot_button {
        height: 30px;
        line-height: 30px;
        .foot_button_top {
          margin-right: 15px;
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
        .foot_button_foot {
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
      }
    }
  }
}
</style>
